<template>
  <div class="about">
    <div style="width: 60%;">
      <!-- 幻灯片 -->
      <el-form  label-width="80px" :model="formLabelAlign" style="display: contents;">
        <el-form-item label="图1">
          <img :src="formLabelAlign.img1" width="100%" height="250px" />
          <el-input v-model="formLabelAlign.img1"></el-input>
        </el-form-item>

        <el-form-item label="图2">
          <img :src="formLabelAlign.img2" width="100%" height="250px" />
          <el-input v-model="formLabelAlign.img2"></el-input>
        </el-form-item>

        <el-form-item label="图3">
          <img :src="formLabelAlign.img3" width="100%" height="250px" />
          <el-input v-model="formLabelAlign.img3"></el-input>
        </el-form-item>
        <el-button @click="submitForm">提交</el-button>
      </el-form>
    </div>


  </div>
</template>
  
<script>
import manageApi from '@/api/manageApi'
export default {
  name: 'slideView',
  data() {
    return {
      slide: [],         //幻灯片数组
      formLabelAlign: {     //表单对象
        img1: '',
        img2: '',
        img3: ''
      },
    }
  },
  methods: {
    //获取幻灯片链接
    getData() {
      const image = JSON.parse(localStorage.getItem('image'));
      this.formLabelAlign.img1 = image[0].userImg;
      this.formLabelAlign.img2 = image[1].userImg;
      this.formLabelAlign.img3 = image[2].userImg;
    },
    //提交新的幻灯片到后端更改
    submitForm() {
      this.slide.push(this.formLabelAlign.img1)
      this.slide.push(this.formLabelAlign.img2)
      this.slide.push(this.formLabelAlign.img3)
      manageApi.updateSlide(this.slide).then(response => {
        this.$message({
              message: '更改成功',
              type: 'success'
            });

      })
      this.slide = [];
      
    },

  },
  mounted() {
    this.getData();
  }
}
</script>